/*
  学习目标：useState的注意事项 
*/

import { useState } from 'react';

export default function App() {
  // 👍一个规范写法： 快捷键useState
  // const [数据变量名 , set+驼峰变量名] = useState(初始值)

  // 1. useState可以调用多次, 声明多个变量
  let [count, setCount] = useState(99);
  const [msg, setMsg] = useState('hello react');

  // 2. useState可以声明任意数据类型
  const [list, setList] = useState([1, 2, 3]);
  const [person, setPerson] = useState({ name: 'zs', age: 18 });

  const handleAdd = () => {
    // 3. 遵循不可变数据原则, 新值覆盖旧值
    //❌ count = count + 1;
    setCount(count + 1);
  };

  const handleAddMsg = () => {
    setMsg(msg + '~');
  };

  return (
    <>
      <h1>
        App - {count} - {msg} - {list} - {person.name}
      </h1>
      <button onClick={handleAdd}>点我+1</button>
      <button onClick={handleAddMsg}>点我+~</button>
    </>
  );
}
